import { styled } from "@linaria/react";
import { Image, Text, View } from "@tarojs/components";

import upvoteSVG from "@/assets/upvote.svg";
import upvoteFillSVG from "@/assets/upvote-fill.svg";
import downvoteSVG from "@/assets/downvote.svg";
import downvoteFillSVG from "@/assets/downvote-fill.svg";

export default function VoteBar({ vote, user_like, summitVote }: {
  vote: number,
  user_like: number | undefined,
  summitVote: (number) => void | undefined
}) {
  return (
    <VoteView onClick={e => e.stopPropagation()}>
      <ButtonImage src={user_like && user_like === 1 ? upvoteFillSVG : upvoteSVG} mode="aspectFit"
        onClick={() => summitVote && summitVote(1)}
      />
      <VoteText>{ vote }</VoteText>
      <ButtonImage src={ user_like && user_like === -1 ? downvoteFillSVG : downvoteSVG } mode="aspectFit"
        onClick={() => summitVote && summitVote(-1)}
      />
    </VoteView>
  );
}

const VoteView = styled(View)`
  height: 40px;
  width: 160px;

  display: flex;
  align-items: center;
`;

const ButtonImage = styled(Image)`
  height: 35px;
  width: 35px;

  flex-grow: 0;
`;
const VoteText = styled(Text)`
  /* font-weight: bold;
  color: red; */
  font-size: 28px;

  text-align: center;
  flex-grow: 1;
`;
